<template>
  <div>
    <button
     class="button_swing"
    :class="{ magnify: magnify, shrink: shrink,swing:swing }"
    >
      Submit
    </button>
  </div>
</template>

<script>
export default {
  name: 'SwingAnimationBtn',
  props: {
    swing: { // 摇摆
      type: Boolean,
      default: false
    },
    magnify: { // 放大
      type: Boolean,
      default: false
    },
    shrink: { // 缩小
      type: Boolean,
      default: false
    }
  }
}
</script>

<style lang="less" scoped>
.button_swing {
  color: #65b5f6;
  background-color: transparent;
  border: 1px solid #65b5f6;
  border-radius: 4px;
  padding: 6px 16px;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
  margin-right: 10px;
}
.button_swing:hover {
  &.magnify {
    // 当传了magnify时，才触发鼠标移入放大效果
    transform: scale(1.1);
  }
  &.shrink {
    // 当传了shrink时，才触发鼠标移入缩小效果
    transform: scale(0.8);
  }
}

.button_swing:focus {
  &.swing {
    // 当传了swing时，才触发鼠标点击摇摆效果
    animation: swing 1s ease;
    animation-iteration-count: 1;
  }
}

@keyframes swing {
  15% {
    transform: translateX(5px);
  }
  30% {
    transform: translateX(-5px);
  }
  50% {
    transform: translateX(3px);
  }
  65% {
    transform: translateX(-3px);
  }
  80% {
    transform: translateX(2px);
  }
  100% {
    transform: translateX(0);
  }
}
</style>
